@import url('https://fonts.googleapis.com/css2?family=Arvo&family=Vollkorn&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@700&display=swap');

/* ========================| BODY |========================*/
html, head, body {
	/* max-width: 1400px !important; */
	/* height: 100%; */
	margin: 0 auto;
	/* overflow: hidden; */
	-ms-overflow-style: none;  /* IE and Edge */
 scrollbar-width: none;
}


.content {
	margin:40px;
	max-width: 100vw;
	overflow-x: hidden;
}

@media only screen and (max-width: 575px) {

	.content {
		margin:30px;
}
html, head, body {
	overflow-x:hidden;
}
}

body {
	font-family: 'Vollkorn', serif;
	/* margin-top: 75px; */
	/* background: radial-gradient(#df3d3e, #b9b8d9); */
	/* background: radial-gradient(#e24e4f, #8088bc); */
	/* background: radial-gradient(#e66465, #9198c5); */
	background-color: black;
	/* background-image: url("https://dathprojects.com/wp-content/uploads/2021/04/background-grain-1.png");
	background-repeat: no-repeat;
	position: inherit; */
	/* background-color: #2626ffff */
	/* overflow: auto; */
	overflow-x: hidden;
}
.website_background {
	background: radial-gradient(#df3d3e, #b9b8d9);
	z-index:-1;
	width:100vw;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
}

/* .slide_wrapper {
	position: relative;
	height: 100vh;
	overflow: auto;
	scroll-snap-type: y mandatory;
}

.slide {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	scroll-snap-align: center;
} */


}

#frameid {

	opacity: 0;
	position: fixed;
	height: 66vh;
	background-color: black;
	transform: rotate(0deg);
	left: 3vw;
	width: 83vw;
	z-index: -2;
	top: 30vh;
	/* box-shadow: 0em 0em 0em 1em black, 0em 0em 0.8em black, 0em 0em 0.8em black, 1em 0.5em 0.2em 0.6em black; */
	transition: opacity 0.3s ease;
}

#frameid.frame_scrolled {

	opacity: 0;
	transition: opacity 0.3s ease;
}

@media only screen and (max-width: 1000px) {
	#frameid {

		opacity: 0;
		position: fixed;
		height: 170vh;
		background-color: black;
		transform: rotate(52deg);
		left: -55vw;
		width: 120vw;
		z-index: -2;
		top: 1vh;
		box-shadow: 0em 0em 0em 0em black, 0em 0em 0.8em black, 0em 0em 0.8em black, 1em 0.5em 0.2em 0.6em black;
		transition: opacity 0.3s ease;
	}

	#frameid.frame_scrolled {
		opacity: 1;
		transition: opacity 0.3s ease;
	}
}

@media only screen and (max-width: 1000px) {
	body {
		margin-top: 15vh;
	}
}

p {
	padding-top: 100px;
	padding-right: 100px;
	padding-left: 100px;
	padding-bottom: 30px;
	font-family: 'Vollkorn', serif;
	font-size: 3.5vw;
	color: #E2E1FF;
	font-weight: 1000;
}

@media only screen and (max-width: 1000px) {
	p {
		padding-top: 10px;
		padding-right: 10px;
		padding-left: 10px;
		padding-bottom: 3px;
		font-family: 'Vollkorn', serif;
		font-size: 3.7vw;
		color: #E2E1FF;
		font-weight: 100;
	}
}

img {
	padding: 0px;
}

a {
	color: #E2E1FF;
}

a:hover {
	text-decoration: none;
	color: #f78da7;
	transition: 850ms ease 100ms;
}

p a {
	color: #fff;
}

h1 {
	/* padding: 10px; */
	font-family: 'Arvo', serif;
	padding-top: 0px;
	color: #2626ffff;
	font-size: 6vw;
}

h2 a {
	/* padding: 20px; */
	font-family: 'Vollkorn', serif;
	font-weight: 100;
	color: darkblue;
	font-size: 2.5vw;
}

h4 a {
	/* padding: 20px; */
	font-family: 'Vollkorn', serif;
	font-weight: 100;
	color: #f78da7;
	font-size: 4vw;
}

h2 a:hover {
	text-decoration: none;
	color: #E2E1FF;
	transition: 850ms ease 100ms;
}

h4 a:hover {
	text-decoration: none;
	color: #E2E1FF;
	transition: 850ms ease 100ms;
}

h3 {
	font-size: 1.2vw;
	font-family: 'Arvo', serif;
	font-weight: bold;
	text-align: center;
	color: #E2E1FF;
	/* color: #212529; */
	padding: 10px;
	font-weight: 100;
}

@media only screen and (max-width: 1000px) {
	h1 {
		font-size: 14vw;
	}

	h2 a {
		font-size: 8vw;
		color: darkblue;
	}

	h3 {
		font-size: 3.8vw;
	}

	h4 a {
		font-size: 9vw;
		line-height: 1.2;
	}
}

a:h3 {
	color: #E2E1FF;
}

small {
	padding: 10px;
}

small a {
	color: #E2E1FF;
	font-family: 'Archivo Black', sans-serif;
}

small.subtitle {
	font-family: 'Archivo Black', sans-serif;
	letter-spacing: 3px;
	color: #fff;
	font-size: 1em;
	padding: 10px;
}

.opening {
	margin: 0 auto;
	position: relative;
}

.aboutus {
	z-index: 3;
}

.services h1 {

	height: 100%;
	/* writing-mode: vertical-rl;
	text-orientation: mixed;
	width: 2vw; */
	position: relative;
	/* left: -15%; */
	font-size: 30vw;
	padding-top: 0px;
	/* padding-left: 250px; */
	background: linear-gradient(to left, white -10%, #b9b8d9 0%, #444444 30%, #bada44 35%, lime 45%, transparent 100%);
	opacity: .8;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	/* background-size: 130% auto;
	animation: services 4s ease-in-out infinite alternate; */
	transition: 0.5s ease;
	transform: translateZ(0);
}

.services.blurred h1{
	filter:blur(4px);
	transition: 1s ease-in-out;
}

/* @media only screen and (max-width: 575px) {
	.services.blurred h1 {
		filter:unset;
		transition: 0.5s ease;
	}
} */

@keyframes services {
	0% {background-position: 0%;}
	100% {background-position: 200%;}
}

.services {
	/* height: 2vh; */
	/* transform: rotate(0deg); */
	position: fixed;
	/* left: -30vw; */
	bottom: -25%;
	left:-10vw;
	z-index:-1;
	/* -webkit-transform: translate(0px, 100px); */
}

@media only screen and (max-width: 1000px) {
	.services h1 {
		writing-mode: vertical-rl;
		text-orientation: mixed;
		height: 40vh;
		font-size: 15vw;
		width: 40vw;
		padding-top: unset;
		padding-left: unset;
	}

	.services {
		padding-top: ;
		height: 0px;
		transform: rotate(-125deg);
		position: fixed;
		left: -13vw;
		top: 25vh;
		z-index: -1;
	}
}

.h2con {
	/* padding: 75px; */
	text-align: left;
}

.h2con a {
	/* padding: 30px; */
	/* background-color: rgba(0, 0, 0, 0.6); */
	/* background:radial-gradient(#b9b8d9, transparent); */
	/* backdrop-filter:blur(6px); */
	border-radius: 25px;
	    /* backdrop-filter: blur(2px); */
	/* padding-top: 170px; */
	/* text-shadow: -1px 1px 0px black; */
}

/* .h2con .col-xl-8 {
	padding: 30px;
	background-color: rgba(0, 0, 255, 0.4);
	backdrop-filter:blur(6px);
	border-radius: 3px;
} */

.h2con2 {
	padding: 75px;
	margin-bottom: 50px;


	    /* backdrop-filter: blur(4px); */
	/* padding-top: 170px; */
}

.description {
	max-width:45vw;
	padding: 30px;
		/* background: radial-gradient(#b9b8d9, transparent); */
		/* backdrop-filter:blur(6px); */
		border-radius: 25px;
		text-align: left;
}

@media only screen and (max-width: 575px) {
	.description {
	max-width:100vw;
	padding:10px;
}
}

.h2con2 h2 {

}

@media only screen and (max-width: 1000px) {
	.h2con {
		padding-top: 5px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 5px;

		/* padding-top: 170px; */
	}

	.h2con2 {
		padding-top: 5px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 5px;
		margin-bottom: 50px;
		/* padding-top: 170px; */
	}

	.h2con h2 {background:none;}
	.h2con2 h2{background:none;}
}

.h2conopening {
	/* position: absolute; */
	/* top: 100vh;
	position: relative; */
	vertical-align: middle;
	/* padding: 20px; */
	padding-top: 30vh;
	/* padding-bottom: 50vh; */
	/* width:40%;
	left: 55%; */
}

@media only screen and (max-width: 1199px) {
	.h2conopening {
		/* position: absolute; */
		vertical-align: middle;
		padding: 5px;
		padding-top: 23vh;
		padding-bottom: 10vh;
	}
}

.toprow {
	padding-top: 50vh;
	overflow: visible;
	/* backdrop-filter: blur(4px); */
}

.hover-image {
	position: relative;
	/* background-color: rgba(0, 0, 0, .2); */
	/* backdrop-filter: blur(4px); */
}

/* .projecttitle {
	z-index: 2;
} */
/* .preview a {
	z-index:1;

} */
.preview img {
	/* box-shadow: inset 0em 0em 0em 0em black, inset 0em 0em 0.8em black, inset 0em 0em 0.8em black, 0em 0em 0.5em 3em black; */
	box-sizing: border-box;
	opacity: 0;
	z-index: -1;
	pointer-events: fill;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	right: 40px;
	width: 45vw;
	height: auto;
	transition: 0.2s ease-out;

}

@media only screen and (max-width: 1199px) {
	.preview img {
		display: none;
		/* width: 70vw; */
	}
}

/* .preview:hover img  {
  opacity:0.95;
  transition: 1500ms;

}
.preview:hover div   {
  opacity:0.95;
  transition: 1500ms;

} */
/* .fixed img {opacity:0;} */


.portfolio-wrapper {
	width: 100%;
}
.preview.fixed img {
	opacity: 0.95;
	transition: 1000ms;
}

.preview.fixed div {
	opacity: 0.95;
	transition: 4000ms;
}

@media only screen and (max-width: 1000px) {
	.preview.fixed div {
		transition: 2500ms;
	}
}

.preview {
	/* display: inline; */
	width: 45vw;
}

@media only screen and (max-width: 1199px) {
	.preview {
		width: 100%;
	}
}

/* .container img {

} */
/* .toprow a:hover {
	background-image: url('https://dathprojects.com/wp-content/uploads/2021/03/Screenshot-2021-03-07-at-3.25.05-PM.png');
	background-repeat: no-repeat;
	background-position: absolute;
	background-size: 1200px;
	background-
	display: flex;

}

.h2con a:hover {
	position: absolute;
	background-image: url('https://dathprojects.com/wp-content/uploads/2021/03/Screenshot-2021-03-07-at-3.25.05-PM.png');
	background-repeat: no-repeat;
	background-position: absolute;
	background-size: contain;
	display: flex;
} */
/* .toprow a:hover
	{

		background-image: url('https://dathprojects.com/wp-content/uploads/2021/03/Screenshot-2021-03-07-at-3.25.05-PM.png');
		background-repeat: no-repeat;
    background-position: top;
		background-size: cover;
		display: inherit;

} */
@media only screen and (max-width: 1000px) {
	.toprow {
		padding-top: 36vh;
	}
}

/*
.arrow {padding-right: 15vw;
padding-left: 15vw;
padding-top: 2vw;
padding-bottom: 0vw;
vertical-align: middle;}

.a1 {opacity: .1;}
.a2 {opacity: .2;}
.a3 {opacity: .3;}
.a4 {opacity: .4;}
.a5 {opacity: .5;}
.a6 {opacity: .6;}
.a7 {opacity: .7;} */
/* ========================| FOOTER |========================*/
footer {
	margin-top: 0px;
	/* background-color: rgba(55, 55, 55, .3); */
	/* text-align: center; */
	/* box-shadow: 0 100vh 0 100vh rgba(55, 55, 55, .3); */
}

footer ul {
	display: flex;
	justify-content: space-around;
	list-style-type: none;
	padding-top: 0px;
}

#social i {
	font-size: 20px;
	color: white;
}

/* footer p {
	font-size: 30px;
} */
.copyright p {
	font-size: 2vw;
}

@media only screen and (max-width: 1000px) {
	footer p {
		font-size: 3.8vw;
	}
}

footer p {
	font-size: 2.5vw;
}

@media only screen and (max-width: 1000px) {
	footer p {
		font-size: 3.8vw;
	}

	footer h3 {
		font-size: 2.5vw
	}
}

a #menu-footer-navigation li a {
	color: #fff;
}

@media only screen and (max-width: 900px) {
	footer ul {
		display: initial;
	}

	footer a {
		line-height: 2;
	}

	footer p {
		padding: 25px;
	}
}

p.p1 {
	font-size: 0.875em;
}